<template>
  <div>
    <re-el-table
      :data="tableData"
      border
      :span-method="objectSpanMethod"
      :show-limit="true"
    >
      <el-table-column
        prop="boxId"
        label="新箱唛"
        min-width="150"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.isSortingExcept">
            <el-tooltip
              content="海外未接收到当前货件"
              placement="top"
            >
              <span class="font-red"><i class="el-icon-warning"></i>{{row.boxId}}</span>
            </el-tooltip>
          </template>
          <template v-else-if="row.isReceiveExcept">
            <el-tooltip
              content="国内未接收到当前货件"
              placement="top"
            >
              <span class="font-red"><i class="el-icon-warning"></i>{{row.boxId}}</span>
            </el-tooltip>
          </template>
          <template v-else>
            {{row.boxId}}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="oldBoxId"
        label="旧箱唛"
        min-width="150"
        align="center"
        show-overflow-tooltip
      >
        <template v-slot="{row}">
          {{row.oldBoxId || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="boxType"
        label="货箱类型"
        min-width="100"
        align="center"
      >
        <template v-slot="{row}">
          {{getBoxTypeStr(row.boxType)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="logisticsNo"
        label="物流单号"
        min-width="150"
        align="center"
        show-overflow-tooltip
      >
        <template v-slot="{row}">
          {{row.logisticsNo || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="estimateTime"
        label="预计送达时间"
        min-width="150"
        align="center"
        show-overflow-tooltip
      >
        <template v-slot="{row}">
          {{row.estimateTime || '-'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsIds"
        label="Listing ID与SKU"
        min-width="200"
        align="center"
        show-overflow-tooltip
      >
        <template v-slot="{row}">
          <template v-if="row.isFullBox">
            <div
              v-for="listing in row.suitSkuList"
              :key="listing.id"
            >
              {{listing.goodsId}}{{listing.sku ? `(${listing.sku})` : ''}}
            </div>
          </template>
          <template v-else>
            <template v-if="row.isTB">
              未贴标（{{row.sku}}）
            </template>
            <template v-else-if="row.isSystemLabel">
              系统标 （{{row.sku}}）
            </template>
            <template v-else>
              {{row.goodsId}} （{{row.sku}}）
            </template>
          </template>

        </template>
      </el-table-column>

      <el-table-column
        prop="exGoodsNum"
        label="商品数量"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="boxExNum"
        label="货箱商品总数"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="rlGoodsNum"
        label="实际上架数量"
        min-width="100"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.status === STATUS_LISTED()">
            {{row.rlGoodsNum || '-'}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="boxRlNum"
        label="实际上架总数"
        min-width="100"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.status === STATUS_LISTED()">
            {{row.boxRlNum || '-'}}
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        min-width="100"
        align="center"
      >
        <template v-slot="{row}">
          {{getBoxStatusStr(row.status)}}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="100"
        prop="op"
        fixed="right"
      >
        <template slot-scope="{row}">
          <template>
            <el-button type="primary" @click="editDialog(row)">修改</el-button>
<!--            <el-button type="danger" @click="removeBox(row)" v-if="row.boxType === MIXIN_BOX()">删除</el-button>-->
          </template>
        </template>
      </el-table-column>
    </re-el-table>
    <el-dialog
      :title="currentBoxType === MIXIN_BOX() ? '编辑混箱商品' : '编辑整箱数据'"
      :visible.sync="dialog"
      width="1300px"
    >
      <div>
        <div class="tips mgb10">请选择填写当前货件箱存放的商品数量和其他箱唛信息</div>
        <div>
          <el-form label-width="130px" label-suffix=":">
            <el-form-item label="旧箱唛">
              <el-input v-model="currentDialogForm.oldBoxId"></el-input>
            </el-form-item>
            <template>
              <el-form-item label="物流单号">
                <el-input v-model="currentDialogForm.logisticsNo"></el-input>
              </el-form-item>
              <el-form-item label="预计送达时间">
                <el-date-picker
                  v-model="currentDialogForm.estimateTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </template>

          </el-form>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="confirmMixinGoods">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ReElTable from "@/components/Common/ReElTable.vue";
import {
  SaveShipmentBoxData
} from "@/api/shipment";
import {
  FULL_BOX,
  getBoxStatusStr,
  getBoxTypeStr, MIXIN_BOX,
  STATUS_CREATED,
  STATUS_LISTED,
  STATUS_RECEIVED
} from "@/utils/boxLabel";
import {deepCopy} from "@/utils";
import {getAddShipmentData} from "@/api/shipment";

export default {
  name: 'ShipmentBoxTable2',
  components: {ReElTable},
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    getData:{
      type:Function,
    }

  },
  data(){
    return{
      dialog:false,
      currentBoxType:'',
      currentDialogForm: {
        oldBoxId: '',
        logisticsNo: '',
        estimateTime: '',
      },
    }
  },
  computed: {
    mergeCell(){
      const mergeObj = {};
      const mergeField = 'boxId'; // 合并的字段
      const mergeFieldArr = [
        'boxId',
        'boxType',
        'weight',
        'squareNumber',
        'volumeWeight',
        'status',
        'boxExNum',
        'boxRlNum',
        'op',
        'oldBoxId',
        'logisticsNo',
        'estimateTime'
      ]; // 合并的单元格

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.tableData.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据合并字段 合并
        if(item[mergeField] && item[mergeField] === this.tableData[index - 1][mergeField]){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
  },
  methods: {
    STATUS_LISTED() {
      return STATUS_LISTED
    },
    getBoxStatusStr,
    STATUS_CREATED() {
      return STATUS_CREATED
    },
    STATUS_RECEIVED() {
      return STATUS_RECEIVED
    },
    MIXIN_BOX() {
      return MIXIN_BOX
    },
    // 修改混箱
    editDialog(row){
      this.dialog = true
      this.currentDialogForm.boxId = row.boxId
      this.currentMixinBox = row.boxIndex
      this.currentDialogForm.logisticsNo = row.logisticsNo
      this.currentDialogForm.estimateTime = row.estimateTime
      this.currentDialogForm.oldBoxId = row.oldBoxId
      this.currentBoxType = row.boxType
    },
    // 确认
    confirmMixinGoods(){
      SaveShipmentBoxData(this.currentDialogForm)
        .then(res=>{
          if(res.error === 0){
            this.dialog = false
            this.getData()
            this.$successMessage(res.message)
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    sortTable(){
      this.mixinBoxGoodsList.sort((a,b)=>{
        return this.getMixinBoxIndex(a) - this.getMixinBoxIndex(b)
      })
    },
    getBoxTypeStr,
    changeSize(row){
      const weight = row.weight
      const volumeWeight = row.volumeWeight
      const squareNumber = row.squareNumber
      this.tableData.filter(item => item.boxId === row.boxId)
        .forEach(item => {
          item.weight = weight
          item.volumeWeight = volumeWeight
          item.squareNumber = squareNumber
          // 都填了
          if(item.weight && item.volumeWeight && item.squareNumber){
            item.status = STATUS_RECEIVED
          }else{
            item.status = STATUS_CREATED
          }
        })

    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.mergeCell
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
  }
}


</script>

<style scoped lang="scss">

</style>
